<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated class="glossy">
      <q-toolbar>
        <q-btn flat dense round @click="leftDrawerOpen = !leftDrawerOpen" aria-label="Menu" icon="menu" />
        <q-toolbar-title>
          企微会话查询
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-drawer v-model="leftDrawerOpen" show-if-above bordered class="bg-grey-2" :width="drawerWidth">
      <q-list class="tab-q-list">
        <q-item class="tab-q-item">
          <q-item-section>
             <div class="tab-item">
                <svg t="1733843242924" class="user-icon icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19745" width="128" height="128"><path d="M512 32c265.088 0 480 214.912 480 480 0 261.76-209.504 474.56-469.952 479.904L512 992C246.912 992 32 777.088 32 512 32 250.24 241.504 37.44 501.952 32.096L512 32z m0 608c-171.552 0-271.136 58.88-286.08 174.016A414.464 414.464 0 0 0 512 928c110.816 0 211.52-43.328 286.048-113.92C783.136 698.88 683.52 640 512 640z m0-384a160 160 0 1 0 0 320 160 160 0 0 0 0-320z" fill="#5a86ec" p-id="19746"></path></svg>
                <span>曹**</span>
              </div>
          </q-item-section>
        </q-item>
        <q-item class="tab-q-item">
          <q-item-section>
            <router-link class="tab-item" to="/home">
                <svg t="1733843080401" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14186" width="128" height="128"><path d="M998.428444 381.112889l-469.333333-353.180445c-0.469333-0.355556-0.981333-0.568889-1.479111-0.896a28.017778 28.017778 0 0 0-2.417778-1.464888 29.909333 29.909333 0 0 0-10.453333-3.128889 30.705778 30.705778 0 0 0-5.475556-0.014223 28.771556 28.771556 0 0 0-13.112889 4.707556c-0.412444 0.284444-0.867556 0.469333-1.28 0.782222l-469.333333 353.180445a28.458667 28.458667 0 0 0 34.204445 45.468444l73.656888-55.424V854.186667c0 111.701333 29.141333 147.555556 136.803556 147.555555h483.555556c107.662222 0 147.640889-35.854222 147.640888-147.555555V379.320889l62.805334 47.260444c5.12 3.854222 11.121778 5.717333 17.080889 5.717334a28.444444 28.444444 0 0 0 17.137777-51.185778zM443.747556 674.673778H580.266667c31.288889 0 36.707556 0.554667 36.707555 28.8v241.422222H417.877333V703.473778c0-28.245333-5.418667-28.8 25.870223-28.8z m400.782222-327.111111v506.666666c0 81.365333-14.193778 90.666667-90.752 90.666667h-108.359111V703.473778c0-48.967111-23.850667-57.244444-65.152-57.244445h-136.519111c-41.301333 0-54.314667 8.277333-54.314667 57.244445v241.422222H270.222222c-76.572444 0-79.914667-9.301333-79.914666-90.666667V347.562667c0-5.788444-1.749333-11.150222-4.721778-15.644445L512 86.272l334.336 251.591111a28.231111 28.231111 0 0 0-1.806222 9.699556z" fill="" p-id="14187"></path><path d="M435.370667 230.499556L250.055111 373.617778c-3.512889 2.688-2.858667 6.855111-2.858667 11.278222v161.777778a14.222222 14.222222 0 1 0 28.444445 0V391.907556l178.730667-138.837334c6.243556-4.778667 5.034667-13.710222 0.256-19.939555a13.425778 13.425778 0 0 0-19.256889-2.631111zM261.418667 589.340444a14.222222 14.222222 0 0 0-14.222223 14.222223v14.222222a14.222222 14.222222 0 1 0 28.444445 0v-14.222222a14.222222 14.222222 0 0 0-14.222222-14.222223z" fill="" p-id="14188"></path></svg>
                <span>首页</span>
            </router-link>
          </q-item-section>
        </q-item>
        <q-item class="tab-q-item">
          <q-item-section>
            <router-link to="/childView" class="tab-item" >
                <svg t="1733841439301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10253" width="128" height="128"><path d="M244.072422 374.434133c-5.005681 11.805512-19.752318 17.979953-32.430556 12.403989-12.378359-4.733995-18.282396-19.479351-12.943516-32.152463 7.048449-17.981235 16.486964-34.192668 26.226639-49.480114a378.437652 378.437652 0 0 1 35.940684-43.332585 280.427042 280.427042 0 0 1 43.910558-35.961188 275.658446 275.658446 0 0 1 49.544191-27.11987c12.678238-5.331191 27.723474 0.598477 32.429274 13.545838 5.60544 11.805512-0.598477 27.121151-13.276715 32.12555a264.739757 264.739757 0 0 0-40.973277 22.115471 333.234024 333.234024 0 0 0-36.267476 30.030239 267.88721 267.88721 0 0 0-30.062277 36.559666 275.207345 275.207345 0 0 0-22.092403 41.265467z m572.426356 383.462556l178.937061 179.45352a41.00916 41.00916 0 0 1 0.299879 58.950667 42.003632 42.003632 0 0 1-58.657195 0L757.541703 816.516719a444.40473 444.40473 0 0 1-116.117436 70.452455 450.588143 450.588143 0 0 1-172.734425 34.192669 455.128625 455.128625 0 0 1-173.632782-34.192669 456.816409 456.816409 0 0 1-244.940022-245.525684l-1.170043-2.040205a451.589022 451.589022 0 0 1-33.029033-170.933867 443.242377 443.242377 0 0 1 34.199076-172.399945A453.776605 453.776605 0 0 1 468.689842 15.778274 454.901794 454.901794 0 0 1 641.126951 50.242628l0.298598 0.298598v-0.298598a463.787966 463.787966 0 0 1 147.104982 98.450178l1.740326 2.040205a454.945366 454.945366 0 0 1 96.398438 144.707228l0.897075 2.365716a446.939609 446.939609 0 0 1-0.897075 343.640098 465.801259 465.801259 0 0 1-70.165391 116.450636zM610.163754 126.870806A371.431494 371.431494 0 0 0 126.461996 326.994224c-18.01071 43.604271-27.424876 91.373534-27.424875 141.475194a378.76957 378.76957 0 0 0 26.5278 139.980922l0.897075 1.467359a380.959715 380.959715 0 0 0 80.449719 120.259361 368.02517 368.02517 0 0 0 120.281147 80.163936c43.03655 17.950478 90.784027 27.690154 141.49698 27.690154a365.467224 365.467224 0 0 0 260.585016-107.282525l0.570284-0.571565a374.376464 374.376464 0 0 0 80.204946-120.259361c18.256765-43.032705 27.968247-91.044179 27.968246-141.449563a368.039267 368.039267 0 0 0-27.096802-139.13639l-0.871444-2.040205c-18.609188-44.22966-44.835827-84.59677-78.136547-118.190962l-2.068399-1.76852c-34.197795-34.165756-75.171071-61.884104-119.681388-79.864057v-0.597196z m101.100394 341.598612a25.41799 25.41799 0 0 1 25.056596-25.052752 25.007898 25.007898 0 0 1 25.057879 25.052752 297.604754 297.604754 0 0 1-22.391002 112.561172l-0.299879 0.598478a292.432473 292.432473 0 0 1-157.987788 157.38931 291.206043 291.206043 0 0 1-112.006267 22.658843 25.039937 25.039937 0 1 1 0-50.078592c31.525792 0 63.064398-6.499952 93.127957-18.278552a241.078753 241.078753 0 0 0 78.430018-52.744187 237.107272 237.107272 0 0 0 52.158525-77.796939l0.871444-1.170042a246.677785 246.677785 0 0 0 17.983798-93.139491z" p-id="10254"></path></svg>
                <span>查询</span>
            </router-link>
          </q-item-section>
        </q-item>
      </q-list>
    </q-drawer>
    <q-page-container>
      <router-view :key="route.fullpath" />
    </q-page-container>
  </q-layout>
</template>

<script>
import { ref } from 'vue'
import { useRoute, useRouter } from "vue-router";
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'LayoutDefault',

  components: {
    // HelloWorld
  },

  setup() {
    const route = useRoute();
    const router = useRouter()
    let drawerWidth = ref(80);

    return {
      route,
      router,
      leftDrawerOpen: ref(false),
      drawerWidth
    }
  }
}
</script>
<style lang="scss" scoped>
// #5a86ec
.tab-q-list{
  margin: 20px 0;
}
.tab-q-item{
  display: flex;
  justify-content: center;
}
.tab-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 15px;
  border-radius: 5px;
  padding: 15px 0 10px 0;
  svg{
    width: 30px;
    height: 30px;
  }
  .user-icon{
    width: 50px;
    height: 50px;
  }
}
.q-item{
  padding: 0;
}
.tab-q-item:nth-of-type(1){
  margin-bottom: 30px;
}
.router-link-active{    //表示router-link激活选中时的状态
  background-color: #5a86ec;
  color: #FFFFFF;
  svg{
    fill: #FFFFFF; 
  }
}
a {
  text-decoration: none; // 去除下划线
  color: inherit; // 继承父元素的颜色
  cursor: pointer; // 改变鼠标指针为手形
}
a:hover{
  text-decoration: none; // 去除下划线
}
</style>